import React, {Component} from 'react';
import {
    Button,
    Platform,
    StyleSheet,
    Text,
    ScrollView,
    Image,
    TouchableOpacity,
    View
} from 'react-native';


export default class XmgMine extends Component {
    static navigationOptions = {
        title: '我',
        headerStyle: {
            backgroundColor: '#055099',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
            fontSize: 16,
        },
        headerLeft: (
            <Button
                title="back"
                color="#ffffff00"
            />
        ),
        headerRight: (
            <Button
                onPress={() => alert('This is a button!')}
                title="Itiels"
                color="#ffffff00"
            />
        ),
    };


    render() {
        let favorite = 190;
        let favorite1 = 1900;
        let favorite2 = 190000000;
        return (
            <ScrollView style={{flex: 1, backgroundColor: '#fff'}} showsVerticalScrollIndicator={false}>
                <View style={{flexDirection: 'column'}}>
                    <View style={{flexDirection: 'row', justifyContent: 'space-between', marginTop: 15}}>
                        <TouchableOpacity onPress={() => alert('夜间')} activeOpacity={0.6} style={[styles.nightView]}>
                            <Image source={require('../../icon/i_night.png')} style={{width: 15, height: 15,}}
                                   resizeMode={'contain'}/>
                            <Text style={{fontSize: 12}}>夜间</Text>
                        </TouchableOpacity>

                        <TouchableOpacity onPress={() => alert('签到')} activeOpacity={0.6} style={[styles.nightView]}>
                            <Image source={require('../../icon/i_night.png')} style={{width: 15, height: 15}}
                                   resizeMode={'contain'}/>
                            <Text style={{fontSize: 12}}>签到</Text>
                        </TouchableOpacity>
                    </View>

                    <View style={{flexDirection: 'column', alignItems: 'center',}}>
                        <TouchableOpacity onPress={() => alert('头像')} activeOpacity={0.6}
                                          style={{backgroundColor: 'transparent',}}>
                            <Image resizeMode={'cover'} style={{
                                width: 100, height: 100, borderRadius: 50, borderWidth: 1, borderColor: 'gray'
                            }} source={require('../../image/car00.jpg')}/>
                        </TouchableOpacity>
                        <Text style={{fontSize: 14, marginTop: 20}}>名字是什么</Text>
                    </View>
                    <View style={{flexDirection: 'row', marginTop: 10}}>
                        <TouchableOpacity style={{flex: 1, alignItems: 'center'}} onPress={() => alert(favorite)}
                                          activeOpacity={0.6}>
                            <Text style={{fontSize: 18, fontWeight: 'bold', color: 'black'}}>{favorite}</Text>
                            <Text style={{fontSize: 14, color: 'gray'}}>收藏</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={{flex: 1, alignItems: 'center'}} onPress={() => alert(favorite1)}
                                          activeOpacity={0.6}>
                            <Text style={{fontSize: 18, fontWeight: 'bold', color: 'black'}}>{favorite1}</Text>
                            <Text style={{fontSize: 14, color: 'gray'}}>历史</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={{flex: 1, alignItems: 'center'}} onPress={() => alert(favorite2)}
                                          activeOpacity={0.6}>
                            <Text style={{fontSize: 18, fontWeight: 'bold', color: 'black'}}>{favorite2}</Text>
                            <Text style={{fontSize: 14, color: 'gray'}}>跟贴</Text>
                        </TouchableOpacity>
                    </View>
                </View>

                <View style={{backgroundColor: '#eeeeee', height: 6, marginTop: 10}}></View>

                {
                    this.settingData.map((item, index) => {
                        return (
                            <ListItem
                                key={index}
                                leftText={item.leftText}
                                rightText={item.rightText}
                                onPress={item.onPress}
                                isNoShowArrow={item.isNoShowArrow}
                            />
                        )
                    })
                }
            </ScrollView>
        );
    }

    settingData = [
        {
            leftText: '我的消息',
            rightText: '评论我的跟帖/通知',
            onPress() {
                alert(this.rightText)
            }
        },
        {
            leftText: '我的关注',
            onPress() {
                alert(this.leftText)
            }
        },
        {
            leftText: '金币商城',
            rightText: '踏春出行，新品幸运享不停',
            onPress() {
                alert(this.rightText)
            }
        },
        {
            leftText: '活动广场',
            onPress() {
                alert(this.leftText)
            }
        },
        {
            leftText: '我的钱包',
            onPress() {
                alert(this.leftText)
            }
        },
        {
            leftText: '免流量看新闻',
            onPress() {
                alert(this.leftText)
            }
        },
        {
            leftText: '扫一扫',
            onPress() {
                alert(this.leftText)
            }
        },
        {
            leftText: '设置',
            isNoShowArrow: true,
            onPress() {
                alert(this.rightText)
            }
        },
        {
            leftText: '我的消息',
            rightText: '评论我的跟帖/通知',
            onPress() {
                alert(this.rightText)
            }
        },
        {
            leftText: '我的关注',
            onPress() {
                alert(this.leftText)
            }
        },
        {
            leftText: '金币商城',
            rightText: '踏春出行，新品幸运享不停',
            onPress() {
                alert(this.rightText)
            }
        },
        {
            leftText: '活动广场',
            onPress() {
                alert(this.leftText)
            }
        },
        {
            leftText: '我的钱包',
            onPress() {
                alert(this.leftText)
            }
        },
        {
            leftText: '免流量看新闻',
            onPress() {
                alert(this.leftText)
            }
        },
        {
            leftText: '扫一扫',
            onPress() {
                alert(this.leftText)
            }
        },
        {
            leftText: '设置',
            isNoShowArrow: true,
            onPress() {
                alert(this.rightText)
            }
        },
        {
            leftText: '我的消息',
            rightText: '评论我的跟帖/通知',
            onPress() {
                alert(this.rightText)
            }
        },
        {
            leftText: '我的关注',
            onPress() {
                alert(this.leftText)
            }
        },
        {
            leftText: '金币商城',
            rightText: '踏春出行，新品幸运享不停',
            onPress() {
                alert(this.rightText)
            }
        },
        {
            leftText: '活动广场',
            onPress() {
                alert(this.leftText)
            }
        },
        {
            leftText: '我的钱包',
            onPress() {
                alert(this.leftText)
            }
        },
        {
            leftText: '免流量看新闻',
            onPress() {
                alert(this.leftText)
            }
        },
        {
            leftText: '扫一扫',
            onPress() {
                alert(this.leftText)
            }
        },
        {
            leftText: '设置',
            isNoShowArrow: true,
            onPress() {
                alert(this.rightText)
            }
        }
    ];

}

class ListItem extends Component {
    static defaultProps = {};

    render() {
        return (
            <TouchableOpacity activeOpacity={0.8} onPress={() => {
                this.props.onPress()
            }}
                              style={[{
                                  height: 50,
                                  borderBottomWidth: 2,
                                  borderBottomColor: '#eeeeee',
                                  marginLeft: 15,
                                  flexDirection: 'row',
                                  alignItems: 'center'
                              }]}>
                <Text style={{flex: 1, color: '#333333'}}>{this.props.leftText}</Text>
                <View style={{flexDirection: 'row', alignItems: 'center', marginRight: 5}}>
                    <Text style={{color: '#999999'}}>{this.props.rightText}</Text>
                    {
                        !this.props.isNoShowArrow &&
                        <Image source={require('../../icon/i_right.png')} style={{width: 22, height: 22}}
                               resizeMode={'cover'}/>
                    }
                </View>
            </TouchableOpacity>
        )

    }
}

const styles = StyleSheet.create({
    nightView: {
        margin: 15,
        flexDirection: 'row',
        backgroundColor: 'transparent',
        justifyContent: 'center',
        alignItems: 'center',
        width: 60,
        height: 28,
        borderColor: 'gray',
        borderWidth: 1,
        borderRadius: 20,
    },
});
